<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>五子棋在线对战游戏</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
		<script src="util.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="qipan.css"/>
	</head>
	<body>
		
		<!-- 游戏选项 如房间加入和创建 -->
		<div class="game_option">
			<!-- 控制区域 -->
			<div class="controller_area">
				<button type="button" onclick="select_room()">选择房间</button>
				<!-- <button type="button" onclick="join_room()">加入房间</button> -->
				<button type="button" onclick="create_room()">创建房间</button>
			</div>
			
			<!-- 游戏区域 -->
			<div class="game_area"  style="display: none;">
				<p>
					当前房间编号: <span class="room_id"></span> &nbsp;&nbsp;&nbsp;|
					当前房间名: <span class="room_name"></span>&nbsp;&nbsp;|
					当前房间人数: <span class="room_num"></span>/2
					</p>
			</div>
		</div>
		<!-- 背景棋盘 -->
		<div id="game">
			<!-- 游戏棋盘 -->
			<div class="game_qipan">
			</div>
		</div>
		
		<!-- 房间列表 -->
		<div id="room" style="display: none;">
			<div class="tip" style="padding: 10px;"></div>
			<div class="close" onclick="close_room_area()">关闭</div>
			<ol></ol>
		</div>
		<script src="shell.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
